<template>
  <div
      class="img-review-wrapper"
      v-show="imgReview.visible"
      @click.self="closeImgReview"
  >
    <img class="img-large" ref="rotate" v-if="imgReview.fileUrl" :src="src" alt/>
    <div class="opera-btn-group">
      <a
          class="download-link"
          target="_blank"
          :href="src"
          :download="imgReview.name"
      >
        <i class="opera-icon el-icon-download" title="保存到本地"></i>
      </a>
      <i class="opera-icon el-icon-refresh-right" title="向右旋转" @click="rotateImg"></i>
      <i class="opera-icon el-icon-aim" title="恢复" @click="restore"></i>
      <i class="opera-icon el-icon-zoom-in" title="放大" @click="zoomIn"></i>
      <i class="opera-icon el-icon-zoom-out" title="缩小" @click="zoomOut"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImgReview',
  props: {
    imgReview: Object
  },
  data() {
    return {
      rotate: 0,
      zoomX: 1,
      zoomY: 1
    }
  },
  methods: {
    //  关闭图片预览
    closeImgReview() {
      this.$emit('imgReviewData', null, false);
      this.rotate = 0;
      this.zoomX = 1;
      this.zoomY = 1;
      if (this.$refs.rotate) {
        this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
      }
    },
    //  旋转图片
    rotateImg() {
      this.rotate += 90;
      if (this.$refs.rotate) {
        this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
      }
    },
    //  重置图片
    restore() {
      this.rotate = 0;
      this.zoomX = 1;
      this.zoomY = 1;
      if (this.$refs.rotate) {
        this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
      }
    },
    //  放大图片
    zoomIn() {
      this.zoomX += 0.2;
      this.zoomY += 0.2;
      if (this.$refs.rotate) {
        this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
      }
    },
    //  缩小图片
    zoomOut() {
      if (this.zoomX > 0.3) {
        this.zoomX -= 0.2;
        this.zoomY -= 0.2;
        if (this.$refs.rotate) {
          this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
        }
      }
    }
  },
  computed: {
    src: function () {
      return process.env.VUE_APP_BASE_API + "/file/preview?uri=" + this.imgReview.fileUrl + "&name=" + this.imgReview.name
    }
  }
}
</script>

<style scoped>
.img-review-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  z-index: 2010;
  text-align: center;
  display: flex;
  align-items: center;
  animation: imgReviewAnimation 0.3s;
  -webkit-animation: imgReviewAnimation 0.3s; /* Safari and Chrome */
  animation-iteration-count: 0.3;
  -webkit-animation-iteration-count: 0.3;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
}

@keyframes imgReviewAnimation {
  0% {
    background: transparent;
  }
  100% {
    background: rgba(0, 0, 0, 0.8);
  }
}

.img-large {
  margin: 0 auto;
  max-width: 80%;
  max-height: 80%;
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s; /* Safari */
}

.opera-btn-group {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: 0;
  bottom: 20px;
  left: 0;
  margin: 0 auto;
  border-radius: 6px;
  width: 600px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

.opera-btn-group .download-link {
  color: inherit;
}

.opera-btn-group .opera-icon {
  margin: 0 10px;
}

</style>
